<template>
	<view class="tab">
		<view class="tab_item" v-for="(item, index) in tab" :key="index" :class="index == current?'current':''"
			@click="change(index)">
			{{item.name}}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	let current = ref(1)
	let tab = ref([{
			name: "普通设置"
		}, {
			name: "标准设置"
		}, {
			name: "加强设置"
		},
		{
			name: "软镜设置"
		},
		{
			name: "管腔设置"
		},
		{
			name: "干燥设置"
		},
	])

	const change = (i) => {
		current.value = i
	}
</script>

<style lang="scss" scoped>
	.current {
		color: var(--color);
		position: relative;

		&:before {
			content: "";
			display: block;
			width: 40px;
			height: 5px;
			border-radius: 20px;
			background: var(--color);
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%);
		}
	}

	.tab {
		// margin-bottom: 20px;
		background: var(--bg);
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		width: fit-content;
		display: flex;
		padding: 10px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
		background: linear-gradient(to bottom, #ebeff7, #fff);
		// border: 3px solid #f7f8f9;
		height: 45px;

		&_item {
			// margin: 0 30px;
			padding: 8px 20px;
			font-size: 18px;
		}
	}
</style>